import { getGoodsList } from '@/src/api/Goods';
import React, { useEffect, useState } from 'react';
import { Image, ScrollView, StyleSheet, TextInput, View } from 'react-native';
import Swiper from 'react-native-swiper';
import 'setimmediate';

const App = () => {
  const [inputText, setInputText] = useState('');
  const [list, setList] = useState([]);
  // 获取商品列表数据
  const loadGetGoodsList = async () => {
    const result = await getGoodsList();
    console.log('result----->', result);
    setList(result.data.rows);
  };
  // 通过副作用处理异步请求数据
  useEffect(() => {
    loadGetGoodsList();
  }, []);

  return (
    <ScrollView>
      {/* Swiper轮播图组件 */}
      {/* showsButtons显示左右按钮 */}
      {/* autoplay自动轮播 */}
      {/* autoplayTimeout自动轮播时间间隔 */}
      {/* paginationStyle控制指示器位置 */}
      <Swiper
        style={styles.wrapper}
        showsButtons={true}
        autoplay={true}
        autoplayTimeout={1}
        removeClippedSubviews={false} // 关闭视图裁剪
        paginationStyle={{
          bottom: 10, // 控制指示器位置
        }}
        dot={
          <View
            style={{
              backgroundColor: 'rgba(0,0,0,0.2)',
              width: 8,
              height: 6,
              borderRadius: 0, // 设置为方形
              margin: 4,
            }}
          />
        }
        activeDot={
          <View
            style={{
              backgroundColor: '#FF3000',
              width: 30,
              height: 6,
              borderRadius: 0, // 设置选中时的方形
              margin: 4,
            }}
          />
        }
      >
        {list.map((item) => {
          return (
            <View key={item.id}>
              <Image style={styles.img} source={{ uri: item.imgUrl }}></Image>
            </View>
          );
        })}
      </Swiper>
      {/* onChangeText事件来读取用户的输入 */}
      <TextInput
        style={styles.input}
        value={inputText}
        onChangeText={setInputText}
        placeholder="搜索..."
      ></TextInput>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    height: 270,
  },
  img: {
    width: '100%',
    height: 270,
  },
  input: {
    borderWidth: 1,
    padding: 8,
    position: 'absolute',
    width: '90%',
    top: 20,
    left: 20,
    borderRadius: 20,
  },
});
export default App;
